<template>
	<u-popup mode="bottom" :show="show" @close="close">
		<view class="u-wrap">
			<view class="u-menu-wrap">
				<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
					<view v-for="(item,index) in list" :key="item.county_id" class="u-tab-item" style="padding: 0;"
						:class="[current == item.county_id ? 'u-tab-item-active' : '']" :data-current="item.county_id"
						@tap.stop="swichMenu(index,item)">
						<text class="u-line-1">{{item.county_text}}</text>
					</view>
				</scroll-view>
				<view style="background-color: #F9F9F9;overflow-y: scroll;" class="f1">
					<template v-if="list.length > 1 && list[index].device.length">
						<block v-for="item in list[index].device" :key="item.device_no">
							<view style="margin-bottom: 20rpx;">
								<view class="description u-tab-item" @click="changeAddress(item)" :class="[device_no == item.device_no ? 'u-tab-right-active' : '']">
									{{item.device_name}}
								</view>
							</view>
						</block>
					</template>

				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import home from '@/api/home.js';
	export default {
		name: 'devicePopup',
		props: {
			show: {
				type: Boolean,
				default: false
			},
			isAll: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				current: null,
				scrollTop: 0, //tab标题的滚动条位置
				menuHeight: 0, // 左边菜单的高度
				menuItemHeight: 0, // 左边菜单item的高度
				index: 0,
				device_no: null,
				// list: [{
				// 	county_text: '全部行政区',
				// 	county_id: '',
				// 	device: []
				// }],
				list: []
			}
		},
		mounted() {
			if(!uni.getStorageSync('token')) return
			this.getCityDeviceByUser()
		},
		methods: {
			close(){
				this.$emit('close')
			},
			async getCityDeviceByUser() {
				const res = await home.getCityDeviceByUser()
				this.list = [...this.list,...res.data]
				
				if (!res.data.length) return
				
				this.current = res.data[0].county_id
			},
			changeAddress(item) {
				this.device_no = item.device_no
				this.$emit('changeAddress', item.device_no, this.current,item.device_name)
			},
			swichMenu(index, item) {
				/* if (index == 0) {
					this.device_no = null
					return this.$emit('swichMenu')
				} */
				this.current = item.county_id
				this.index = index
				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
					this.getElRect('menu-scroll-view', 'menuHeight')
					this.getElRect('u-tab-item', 'menuItemHeight')
				}
				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2
			},
			getElRect(elClass, dataVal) {
				uni.createSelectorQuery().select("." + elClass).fields(({
					size: true
				}), (res) => {
					if (!res) {
						setTimeout(() => {
							this.getElRect(elClass, null);
						}, 10);
						return;
					}
					this[dataVal] = res.height
				}).exec()

			},
		}
	}
</script>

<style lang="scss" scoped>

	.u-wrap {
		height: 50vh;
		/* #ifdef H5 */
		// height: calc(100% - var(--window-top));
		/* #endif */
		display: flex;
		flex-direction: column;

		.u-menu-wrap {
			flex: 1;
			display: flex;
			overflow: hidden;
			padding-top: 20rpx;
		}

		.u-tab-view {
			width: 160rpx;
		}

		.u-tab-item {
			width: 160rpx;
			height: 66rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			color: #444;
			line-height: 1;
			font-weight: 500;
			color: #333333;
			width: 100%;
			line-height: 66rpx;
			padding-left: 20rpx;

			&:not(:last-child) {
				margin-bottom: 20rpx;
			}
		}
		.u-tab-right-active {
			color: #FCB527;
			background: #fff;
		}
		.u-tab-item-active {
			position: relative;
			border-left: 6rpx solid #FCB527;
			color: #FCB527;
			background: #F9F9F9;
		}

		.u-tab-item-active::before {
			content: "";
			position: absolute;
			height: 32rpx;
			left: 0;
			top: 39rpx;
		}

		.u-tab-view {
			height: 100%;
		}

		.description {
			display: -webkit-box;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
		}
	}
</style>